<template>
    <div class="app-container">
        <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
            :model="formData" :rules="rules" size="medium" label-width="130px">
            <h2 style="text-align: center">入库验收</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="入库序号" prop="code">
                        <el-input disabled v-model="formData.code" placeholder="系统自动生成" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="名称" prop="name">
                        <el-input disabled v-model="formData.name" placeholder="请选择名称" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库日期" prop="joinDate">
                        <el-date-picker disabled v-model="formData.joinDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择入库日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数量" prop="num">
                        <el-input-number disabled v-model="formData.num" placeholder="请输入数量" clearable
                            :style="{ width: '100%' }" :step="1" controls-position="right">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="验收情况" prop="conditionId">
                        <el-select v-model="formData.conditionId" placeholder="请选择验收情况" clearable
                            :style="{ width: '100%' }">
                            <el-option v-for="(item, index) in dict.type.sys_ysqk_type" :key="index" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="验收人" prop="checkUserName">
                        <!-- <UserDialog :disabled="$route.query.isInfo || isInfo" placeholder="请输入保管人" @change="changeUser"
                            v-model="formData.checkUserName"></UserDialog> -->
                        <el-input disabled v-model="formData.checkUserName" placeholder="请输入验收人" clearable
                            :style="{ width: '100%' }"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="有效日期" prop="validDate">
                        <el-date-picker v-model="formData.validDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择有效日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="确认日期" prop="confirmDate">
                        <el-date-picker v-model="formData.confirmDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择确认日期" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="200px" label="是否可用于日常试验" prop="isTest">
                        <el-radio-group v-model="formData.isTest">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <h4 class="form-header h4" style="margin-top: 20px">验收记录</h4>
        <el-form-item label="" prop="file">
          <FileUpload
            :isDelete="!$route.query.isInfo"
            v-model="formData.file"
          ></FileUpload>
        </el-form-item> -->

            <el-col :span="24" v-if="btnShow">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button v-if="!($route.query.isInfo || isInfo)" type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import {
    consume_join_check,
    consume_join_checkEdit,
    consume_join_check_Info,
} from "@/api/quality/goods/consumeIn.js";
import { selectList as muSelect } from "@/api/quality/goods/directory.js";
import { deptTreeSelect } from "@/api/system/user.js";
import store from "@/store";
export default {
    dicts: ["sys_ysqk_type"],
    components: {},
    props: {
        isInfo: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: "",
        },
        btnShow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            carSelectList: [],
            formData: {
                chemistryGoodsDirectoryId: "",
                checkUserName: "",
                name: undefined,
                code: undefined,
                categoryValue: undefined,
                levelValue: undefined,
                tecTarget: undefined,
                spec: undefined,
                num: undefined,
                conditionId: undefined,
                tecTarget: undefined,
                file: "",
                joinDate: "",
                // validDate: "",
                deptId: undefined,
                useInfo: undefined,
                techInfo: undefined,
                isTest: 1,
            },
            deptOptions: [],

            rules: {


                isTest: [
                    {
                        required: true,
                        message: "请选择是否可用于日常试验",
                        trigger: "change",
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入名称",
                        trigger: "blur",
                    },
                ],
                code: [
                    {
                        required: false,
                        message: "批次入库批次自动生成",
                        trigger: "blur",
                    },
                ],




                conditionId: [
                    {
                        required: true,
                        message: "请输入验收情况",
                        trigger: "blur",
                    },
                ],
                num: [
                    {
                        required: true,
                        message: "请输入数量",
                        trigger: "blur",
                    },
                ],
                checkUserName: [
                    {
                        required: true,
                        message: "请选择验收人",
                        trigger: "change",
                    },
                ],
                validDate: [
                    {
                        required: true,
                        message: "请选择有效期",
                        trigger: "change",
                    },
                ],
                confirmDate: [
                    {
                        required: true,
                        message: "请选择确认日期",
                        trigger: "change",
                    },
                ],



                joinDate: [
                    {
                        required: true,
                        message: "请选择入库日期",
                        trigger: "change",
                    },
                ],
            },
            muSelectList: [],
        };
    },
    computed: {},
    created() {
        // this.muSelect();
        // this.getDeptTree();
        // if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
        this.getinfo();
        // }
    },
    mounted() {
        this.isEdit = this.$route.query.isEdit ? this.$route.query.isEdit : false
    },
    methods: {
        // muSelect() {
        //     muSelect().then((response) => {
        //         this.muSelectList = response.data;
        //     });
        // },
        /** 查询部门下拉树结构 */
        // getDeptTree() {
        //     deptTreeSelect().then((response) => {
        //         this.deptOptions = response.data;
        //         this.formData.deptId = store.state.user.dept.deptId
        //     });
        // },
        changeUser(e) {
            this.formData.managerUser = e.nickName;
        },
        getinfo() {
            if (this.$route.query.dataObj) {
                let dataObj = JSON.parse(this.$route.query.dataObj)
                console.log(dataObj);
                this.formData.code = dataObj.code
                this.formData.name = dataObj.name
                this.formData.num = dataObj.num
                this.formData.joinDate = dataObj.joinDate
                this.formData.isTest = 1
                this.formData.consumeGoodsJoinId = dataObj.consumeGoodsJoinId
                this.formData.chemistryGoodsDirectoryId = dataObj.chemistryGoodsDirectoryId
                setTimeout(() => {
                    this.formData.conditionId = this.dict.type.sys_ysqk_type[0].value
                    this.formData.conditionValue = this.dict.type.sys_ysqk_type[0].label;
                }, 500)
                console.log(this.formData.conditionId);
            } else {
                return consume_join_check_Info(this.$route.query.id || this.id).then(
                    (response) => {
                        this.formData = response.data;
                        this.formData.conditionId = this.formData.conditionId.toString()
                        this.formData.checkUserId = this.$store.state.user.id
                        this.formData.checkUserName = this.$store.state.user.nickName
                    }
                );
            }
            console.log(this.$store.state);
            this.formData.checkUserId = this.$store.state.user.id
            this.formData.checkUserName = this.$store.state.user.nickName
            // console.log(this.dict.type.sys_ysqk_type);

            // console.log(this.formData.conditionId );
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    // query.deptId = this.$refs.reference.getCheckedNodes()[0].value;
                    // query.dept = this.$refs.reference.getCheckedNodes()[0].label;
                    query.conditionValue = this.dict.type.sys_ysqk_type.find(
                        (e) => e.value === query.conditionId
                    ).label;
                    query.conditionId = Number(query.conditionId)
                    if (this.isEdit) {
                        consume_join_checkEdit(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        consume_join_check(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
<style scoped>
.upload-file-uploader {
    margin-bottom: 5px;
}

.upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
}

.upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
}

.ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
}
</style>
  